Skip to main content

DOM methods

These methods make usage of the HTML DOM API.

This method allows one to navigate to a certain dashboard. Optionally, one can send a second boolean parameter to decide if the path should replace the current one in the history.

Important

Dashboards paths must start with /, if you use an absolute URL or a path that doesn't start with /, it will be ignored and a warning will be thrown in the console.

info

When you visit a URL directly, there is a logic to select the proper sidebar item taking into account its href. You need to be aware that when using the navigate method, there is no way for the plugin to know that an item redirects to a dashboard path, so in those cases the item will not be selected.


// Navigate to a dashboard path appending the URL to the history
navigate('config/developer-tools/yaml');
navigate('/config/integrations/dashboard', false);
// Navigate to a dashboard path replacing the current URL in the history
navigate('/config/automation/dashboard', true);

activateItem​

This method allows one to make an item in the sidebar active programatically and it will deactivate the previous active item automatically. You need to send an ha-md-list-item element as parameter.

tip

Usually, this method is used inside the code parameter of an on_click javascript action, you can send the ha-md-list-item element accesing the element property of the item variable.


activateItem(container.querySelector('ha-md-list-item:last-of-type'));
// If the JavaScript template belongs to an on_click item property
activateItem(item.element);

fireEvent​

This method allows one to trigger custom events from specific DOM elements. If no element is provided, it will be triggered from the home-assistant element.

// Fire an event in a specific element
fireEvent(
  document,
  'll-custom',
  {
    uix: {
      action: 'clear_cache'
    }
  }
);

// Fire an event from the home-assistant element
// If the element node is not specified, it will be triggered from the home-assistant element
fireEvent(
  'hass-dock-sidebar',
  {
    dock: 'always_hidden'
  }
);

// Fire an event from the home-assistant element without any detail
fireEvent('my-custom-event');